<!-- subpkg_consult/description/index.vue -->
<script lang="ts" setup>
  import type { ConsultInfo } from "@/types/patient"
  import { useConsultStore } from "@/stores/consult"
  import { uploadImageApi } from "@/apis/user"
  import { ref } from "vue"
  const store = useConsultStore()
  const props = defineProps<{ depId: string }>()
  store.setDepId(props.depId)
  // 病情描述数据
  const illnessInfo = ref<ConsultInfo>({
    // 描述
    illnessDesc: "",
    // 患病的时长
    illnessTime: 1,
    // 是否就诊过
    consultFlag: 0,
    // 选择的图片数组
    pictures: [],
  })
  // 恢复数据
  const init = async () => {
    if (store.illnessInfo.illnessDesc) {
      // 存过数据
      const res = await uni.showModal({
        title: "温馨提示",
        content: "是否要恢复之前的填写的病情信息?",
      })
      if (res.confirm) {
        // 开始恢复
        illnessInfo.value = store.illnessInfo
      }
    }
  }
  init()
  // 患病时长
  const illnessTimes = [
    { value: 1, text: "一周内" },
    { value: 2, text: "一月内" },
    { value: 3, text: "半年内" },
    { value: 4, text: "半年以上" },
  ]

  // 省略前面小节的代码...

  // 是否就诊过
  const consultFlags = [
    { value: 1, text: "就诊过" },
    { value: 0, text: "没有就诊过" },
  ]

  // 选择图片
  const onSelect = (e: UniHelper.UniFilePickerOnSelectEvent) => {
    console.log(e)

    e.tempFiles.forEach(async (v) => {
      const res = await uploadImageApi(v.path)

      illnessInfo.value.pictures.push({
        name: v.name,
        extname: v.extname,
        url: res.url,
        id: res.id,
      })
    })
  }
  // 下一步
  const onSubmit = () => {
    // 验证病情描述是否为空
    if (illnessInfo.value.illnessDesc === "") {
      uni.showToast({ title: "病情描述不能为空", icon: "none" })
      return
    }
    // 存数据到pinia中
    store.setIllnessInfo(illnessInfo.value)
    // 跳转页面 type 表示 选中患者！ 没有type 患者档案列表  3 暂时没有语义
    uni.navigateTo({ url: "/subpkg_archive/list/index?type=3" })
  }
</script>

<template>
  <scroll-page>
    <view class="description-page">
      <!-- 在线医生 -->
      <view class="doctor-online">
        <image src="/static/uploads/doctor-avatar-2.png" class="doctor-avatar" />
        <view class="doctor-info">
          <view class="name">在线医生</view>
          <view class="message">
            请描述你的疾病或症状、是否用药、就诊经历，需要我听过什么样的帮助
          </view>
          <view class="tips">
            <text class="iconfont icon-shield"></text>
            内容仅医生可见
          </view>
        </view>
      </view>
      <!-- 患者信息 -->
      <view class="patient-info">
        <view class="description">
          <uni-easyinput
            type="textarea"
            :input-border="false"
            placeholder-style="font-size: 30rpx; color: #979797"
            placeholder="请详细描述您的病情,病情描述不能为空"
            v-model="illnessInfo.illnessDesc"
          />
        </view>

        <view class="title">本次患病多久了？</view>
        <view class="tags">
          <text
            v-for="item in illnessTimes"
            :key="item.value"
            class="tag"
            :class="{ active: illnessInfo.illnessTime === item.value }"
            @click="illnessInfo.illnessTime = item.value"
            >{{ item.text }}</text
          >
        </view>

        <view class="title">此次病情是否去医院就诊过？</view>
        <view class="tags">
          <text
            v-for="item in consultFlags"
            :key="item.value"
            class="tag"
            :class="{ active: illnessInfo.consultFlag === item.value }"
            @click="illnessInfo.consultFlag = item.value"
            >{{ item.text }}</text
          >
        </view>
      </view>
      <!-- 上传图片 -->
      <view class="patient-picture">
        <uni-file-picker
          v-model="illnessInfo.pictures"
          @select="onSelect"
          :auto-upload="false"
          title="上传病情相关图片 (仅医生可见)"
          limit="8"
          :image-styles="{ width: '160rpx', height: '160rpx' }"
          file-extname="png,jpg,gif,webp"
        />
      </view>
    </view>
    <!-- 下一步操作 -->
    <view class="next-step">
      <button class="uni-button" @click="onSubmit">下一步</button>
    </view>
  </scroll-page>
</template>

<style lang="scss">
  @import "./index.scss";
</style>
